import QtQuick 1.1
import com.nokia.symbian 1.1
import "../delegates"
import "../js/core.js" as Core

Page {
    id: root

    property string noteName
    property string noteBody
    property int noteID
    property int topicID

    TitleHeader {
        id: header
        text: "Note - " + noteName
    }

    Label {
        id: titleLabel
        text: "Title:"
        color: platformStyle.colorNormalLight
        font.family: platformStyle.fontFamilyRegular
        anchors {
            top: header.bottom;
            left: root.left; right: root.right
            margins: 5
        }
    }

    TextField {
        id: titleField
        anchors {
            top: titleLabel.bottom;
            left: root.left; right: root.right
        }
    }

    Label {
        id: noteLabel
        text: "Note:"
        color: platformStyle.colorNormalLight
        font.family: platformStyle.fontFamilyRegular
        anchors {
            top: titleField.bottom
            left: root.left; right: root.right
            margins: 5
        }
    }

    TextArea {
        id: noteField
        anchors {
            top: noteLabel.bottom; bottom: root.bottom
            left: root.left; right: root.right
        }
    }

    ConfirmDialog{
        id:deleteDialog
        dialogTitleText: "Delete Confirmation"
        messageText: "      Are you sure you want\n to delete the current note?"

        onAccepted: {
            Core.deleteNote(noteID);
            root.pageStack.pop();
        }
    }

    tools: ToolBarLayout {

        ToolButton {iconSource: "toolbar-back"; onClicked:{
                root.pageStack.pop();
                root.state = "edit";
                root.state = "add";
            }}

        ButtonRow {
            exclusive: false
            Button { id: addButton; text: "Save";
                onClicked: {
                    Core.addNote(titleField.text, noteField.text, topicID);
                    root.pageStack.pop();
                    root.state = "edit"
                    root.state = "add"
                }
            }
            Button { id: updateButton; text: "Save";
                onClicked: {
                    Core.updateNote(titleField.text, noteField.text, noteID);
                    root.pageStack.pop();
                    root.state = "add"
                    root.state = "edit"
                }
            }
        }

        ToolButton { id: deleteTool; iconSource: "toolbar-delete";
            onClicked: {
                deleteDialog.open();
            }
        }

    }

    states:    [

        State {
            name: "add"
            PropertyChanges { target: updateButton; visible: false}
            PropertyChanges { target: addButton; visible: true}
            PropertyChanges { target: deleteTool; visible: false}
            PropertyChanges { target: header; text:"Add New Note"}

            PropertyChanges { target: titleField; text:""}
            PropertyChanges { target: noteField; text:""}

        },
        State {
            name:"edit"
            PropertyChanges { target: updateButton; visible: true}
            PropertyChanges { target: addButton; visible: false}
            PropertyChanges{ target: deleteTool; visible: true}

            PropertyChanges { target: titleField; text:noteName}
            PropertyChanges { target: noteField; text:noteBody}
        }
    ]

    transitions: [
        Transition {
            NumberAnimation {properties: "width,height"; duration: 250}
        }
    ]

    Component.onCompleted: {
        Core.openDB();
    }
}
